<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function getRequeteHttp(){
                var xhr=null;
                if (window.XMLHttpRequest){ //navigateurs non MS
                    xhr=new XMLHttpRequest();
                }
                else
                    if (window.ActiveXObject){ //versions de MS IE
                        xhr=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                else {
                    alert("navigateur non comptatible Ajax...");
                }
                return xhr;
            }

            function envoyerRequete(url,debut){
                var xhr=getRequeteHttp();
                xhr.open("POST", url, true);
                xhr.onreadystatechange = function(){
                    recevoirReponse(xhr);
                }
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send('debutNom='+escape(debut));
            }
            function recevoirReponse(xhr){
                if (xhr.readyState == 4 && xhr.status==200) {
                    traiterReponse(xhr.responseText);
                }
            }

            function traiterReponse(reponse){
                //on met a jour et affiche la liste correspondant aux premiers caracteres saisis
                var i,nb,selectVisiteur;
                var visiteurs=reponse.split('/');
                nb=visiteurs.length;
                selectVisiteur=document.getElementById('listeVisiteurs');
                selectVisiteur.length=nb;
                for(i=0;i<nb;i++){
                    selectVisiteur.options[i].text=visiteurs[i];
                }
            }
            
            function afficher(idVisiteur) {
                id=xmldocument.getElementsByTagName("id");
                nom=xmldocument.getElementsByTagName("nom");
                pre=xmldocument.getElementsByTagName("prenom");
                adr=xmldocument.getElementsByTagName("adresse");
                cp=xmldocument.getElementsByTagName("cp");
                vil=xmldocument.getElementsByTagName("ville");
                dat=xmldocument.getElementsByTagName("dateEmbauche");
                var txtId=id[idVisiteur].firstChild.nodeValue;
                var txtNom=nom[idVisiteur].firstChild.nodeValue;
                var txtPrenom=pre[idVisiteur].firstChild.nodeValue;
                var txtAdresse=adr[idVisiteur].firstChild.nodeValue;
                var txtCp=cp[idVisiteur].firstChild.nodeValue;
                var txtVille=vil[idVisiteur].firstChild.nodeValue;
                var txtDateEmbauche=dat[idVisiteur].firstChild.nodeValue;            
                document.getElementById("id").innerHTML=txtId;
                document.getElementById("nom").innerHTML=txtNom;
                document.getElementById("prenom").innerHTML=txtPrenom;
                document.getElementById("adresse").innerHTML=txtAdresse;
                document.getElementById("cp").innerHTML=txtCp;
                document.getElementById("ville").innerHTML=txtVille;
                document.getElementById("dateEmbauche").innerHTML=txtDateEmbauche;
            }
            
        </script>
        <style type="text/css">
            body{
                font-family: Arial;
            }
        </style>
    </head>
    <body>
        Nom du visiteur:
        <input types="text" onkeyup="javascript:envoyerRequete('chercherVisiteurDebutNom.php', this.value)">
        <br>
        Liste des visiteurs:<br>
        <select id="listeVisiteurs" size='10'></select>
    </body>
</html>
